<template>
	<view>
		<!--
		    author: 李文昊
		    mid-content:导航栏总包裹
			content-item:导航栏单项包裹
			nav-span:文字部分包裹
			nav-view:底部红色样式包裹
		-->
		<view class="mid-content">
			<view :style="{'width':viwidth}" class="content-item" v-for="(item,index) in bottomNavList" :key="item.id"
				@click="fathar(item.method)">
				<i v-if="item.pendingFlag" class="tip"></i>
				<text class="nav-span">{{item.name}}</text>
				<view class="nav-view" :style="{'background-color':itemColor[item.id]}"
					:class="{'active1':checkInNumber==index}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkInNumber: -1
			}
		},
		props: {
			itemColor: Array,
			bottomNavList: Array
		},
		computed: {
			viwidth() {
				return 100 / this.bottomNavList.length + '%';
			}
		},
		methods: {
			fathar(arg) {
				this.$emit(arg);
			}
		}
	}
</script>

<style>
	.mid-content {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	.content-item {
		position: relative;
		float: left;
		height: 89rpx;
		text-align: center;
		line-height: 89rpx;
		border-right: 0rpx solid rgba(238, 238, 238, 1);
		font-size: 0;
	}

	.nav-span {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #212121;
	}

	.nav-view {
		position: absolute;
		width: 30%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 6rpx;
		border-radius: 4rpx;
	},
	.tip {
		width:10px;
		height:10px;
		line-height:20px;
		font-size:10px;
		color:#fff;
		text-align:center;
		background-color:#f00;
		border-radius:50%;
		position:absolute;
		right:10px;
		top:0px;
	}
</style>
